<template>
  <div class="forgetPassword">
    <div class="top" style="width: 100vm; height: 20vh">
      <van-image
          round
          width="10rem"
          height="10rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          class="head-icon"
      />
    </div>
    <van-cell-group class="text">
      <van-field
          class="account"
          v-model="User.number"
          label="手机号码"
          left-icon="manager-o"
          right-icon="warning-o"
          placeholder="输入测试账号"
      />
      <van-field
          class="password"
          v-model="User.password"
          clearable
          label="密码"
          left-icon="lock-o"
          placeholder="测试密码"
      />
      <van-field
          class="password"
          v-model="User.password2"
          clearable
          label="密码"
          left-icon="lock-o"
          placeholder="测试密码"
      />
    </van-cell-group>
    <div style="margin-top: 30px" >
      <van-button style="margin: auto; width: 150px;height: 50px;display: block" type="warning" @click="commit">注册</van-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import {ApiService} from "../../../axios/apiService";
import { Image as VanImage,Dialog} from 'vant';
export const login= new ApiService('/user/login')

Vue.use(VanImage,Dialog);

export default {
  props: {
  },
  data() {
    return {
      User:{
        number:'admin',
        password:'123456',
        password2:'',
      }
    }
  },
  methods: {
    commit() {
      Dialog.alert({
        title:"系统提示",
        message:"两次密码输入不一致"
      }).then(()=> {
        return
      })

    },
  }
}
</script>
<style >
.login .head-icon {
  display: block;
  margin: auto;
}
.text {

  margin-top: 50px;
  margin-left: 10px;
  margin-right: 10px;
}
.account {
  position: relative;
  margin-top: 5px;
}
.password {
  position: relative;
  margin-top: 5px;
}

</style>